<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    v-model修饰符
     trim 去除空格
     number 收集数字
     lazy 懒加载 等待完全输入以后再收集
    -->
    <form>
        账号：<input type="text" v-model.trim="user.acount"> <br>
        密码：<input type="password" v-model="user.password"> <br>
        年龄：<input type="number" v-model.number="user.age"> <br>
        性别：
        <input type="radio" name="sex" value="1" v-model="user.sex">男
        <input type="radio" name="sex" value="2" v-model="user.sex">女
        <br>
        爱好：
        <input type="checkbox" value="yy" v-model="user.hobby">音乐
        <input type="checkbox" value="yx" v-model="user.hobby">游戏
        <input type="checkbox" value="yd" v-model="user.hobby">运动
        <br>
        毕业学校：
        <select v-model="user.school">
            <option selected value="">请选择毕业学校：</option>
            <option value="bd">北大</option>
            <option value="qh">清华</option>
            <option value="hf">哈佛</option>
        </select>
        <br>
        其他备注说明：
        <textarea v-model.lazy="user.others"></textarea>
        <br>

        <button @click="submit()">提交</button>

    </form>

</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //存放需要的数据 数据模型
                //接收表单信息的对象
                user:{
                    acount:'',//账号
                    password:'',//密码
                    age:0,//年龄
                    sex:'',//性别
                    hobby:[],//爱好
                    school:'',//学校
                    others:''//其他信息
                }

            }
        },
        methods:{
            //点击提交触发函数
            submit(){
                console.log("发送数据到服务器交互"+this.user);
            }
        },
        //生命周期  又叫生命周期钩子  函数
        beforeCreate(){console.log("创建之前");},
        created(){console.log("创建之后");},
        beforeMount(){console.log("挂载之前");},
        mounted(){console.log("挂载之后");},
        beforeUpdate(){console.log("修改之前");},
        updated(){console.log("修改之后");},
        beforeDestroy(){console.log("销毁之前");},
        destroyed(){console.log("销毁完毕");}
    });
</script>